@import '~antd/es/style/themes/default.less';

.class-margin-padding-mixin (@size: 0, @max: 60) {
  .all(@size: @size, @max: @max) when (@size <= @max) {
    //.m-@{size} {
    //  margin: 1px * @size !important;
    //}

    .p-@{size} {
      padding: 1px * @size !important;
    }

    .all(@size + 1, @max);
  }

  .all();

  .cross(@size: @size, @max: @max) when (@size <= @max) {
    .mv-@{size} {
      margin-top: 1px * @size !important;
      margin-bottom: 1px * @size !important;
    }
    .mh-@{size} {
      margin-left: 1px * @size !important;
      margin-right: 1px * @size !important;
    }
    .pv-@{size} {
      padding-top: 1px * @size !important;
      padding-bottom: 1px * @size !important;
    }
    .ph-@{size} {
      padding-left: 1px * @size !important;
      padding-right: 1px * @size !important;
    }

    .cross(@size + 1, @max);
  }

  .cross();

  .single(@size: @size, @max: @max) when (@size <= @max) {
    .ml-@{size} {
      margin-left: 1px * @size !important;
    }

    .mr-@{size} {
      margin-right: 1px * @size !important;
    }

    .mt-@{size} {
      margin-top: 1px * @size !important;
    }

    .mb-@{size} {
      margin-bottom: 1px * @size !important;
    }

    .pl-@{size} {
      padding-left: 1px * @size !important;
    }

    .pr-@{size} {
      padding-right: 1px * @size !important;
    }

    .pt-@{size} {
      padding-top: 1px * @size !important;
    }

    .pb-@{size} {
      padding-bottom: 1px * @size !important;
    }

    .single(@size + 1, @max);
  }

  .single();
}

.data-width-height-mixin (@size: 0, @max: 200) when (@size <= @max) {
  [data-width='@{size}'] {
    width: @size * 1px !important;
  }
  [qql-form-label-width='@{size}'] {
    & > .ant-form-item-label {
      width: @size * 1px !important;
    }
  }
  //[data-height='@{size}'] {
  //  height: @size * 1px !important;
  //}

  .data-width-height-mixin(@size + 1, @max);
}

:global {
  html,
  body {
    height: 100%;
    background-color: #f8f8f8;
    & > #root {
      height: 100%;
      & > .ant-design-pro {
        height: 100%;
      }
    }
  }

  body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #e6e6e6;
  }

  .colorWeak {
    filter: invert(80%);
  }

  .ant-layout {
    min-height: 100vh;
  }

  .ub {
    display: flex;
  }

  .ub-row {
    flex-direction: row !important;
  }

  .ub-column {
    flex-direction: column !important;
  }

  .ub-rev {
    flex-direction: reverse;
  }

  .ub-wrap {
    flex-wrap: wrap;
  }

  .ub-as {
    align-items: flex-start;
  }

  .ub-ac {
    align-items: center !important;
  }

  .ub-ae {
    align-items: flex-end;
  }

  .ub-pc {
    justify-content: center !important;
  }

  .ub-pe {
    justify-content: flex-end;
  }

  .ub-sb {
    justify-content: space-between;
  }

  .ub-sa {
    justify-content: space-around;
  }

  /* .ub-pj {
  box-pack: justify;
}

  .ub-ver {
    box-orient: vertical;
  } */

  .ub-fh {
    width: 100%;
  }

  .ub-fv {
    height: 100%;
  }

  .ub-con {
    width: 100%;
    height: 100%;
  }

  .ub-f1 {
    flex: 1;
  }

  .ub-f2 {
    flex: 2;
  }

  .ub-f3 {
    flex: 3;
  }

  .ub-f4 {
    flex: 4;
  }

  .ub-img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ub-img1 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ub-img2 {
    background-repeat: repeat-x;
    background-size: auto 100%;
  }

  .ub-img3 {
    background-repeat: repeat-y;
    background-size: 100% auto;
  }

  .ub-img4 {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ub-img5 {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ub-img6 {
    background-repeat: no-repeat;
    background-position: center;
  }

  .ub-img7 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  [data-layout],
  [data-layout='column'],
  [data-layout='row'] {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }

  [data-layout='column'] {
    flex-direction: column;
  }

  [data-layout='row'] {
    flex-direction: row;
  }

  .single-line-ellipsis {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  canvas {
    display: block;
  }

  ul,
  ol {
    list-style: none;
  }

  @media (max-width: @screen-xs) {
    .ant-table {
      width: 100%;
      overflow-x: auto;
      &-thead > tr,
      &-tbody > tr {
        > th,
        > td {
          white-space: pre;
          > span {
            display: block;
          }
        }
      }
    }
  }

  // 兼容IE11
  @media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
    body .ant-design-pro > .ant-layout {
      min-height: 100vh;
    }
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-y-hidden {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .overflow-x-hidden {
    overflow-y: auto;
    overflow-x: hidden;
  }

  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
      'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    line-height: 20px;
    margin: 0;
    padding: 0;
  }

  .link-button {
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    color: #1890ff;
  }

  div:focus {
    outline: none;
  }

  .class-margin-padding-mixin();
  .data-width-height-mixin();
}
